import { RouterProvider } from 'react-router-dom'
import router from '@/router'
import { Suspense, useEffect, lazy } from 'react'
import { useSelector } from 'react-redux'
import { RootState } from './store'
import { dynamicComponent } from '@/utils/dynamicComponent'

function App () {
  /**
   * 什么时候添加动态路由？
   * 第一个时候，获取完用户信息之后，添加动态路由
   * 第二个时候，刷新页面的时候
   *
   * 如何避免重复添加呢？
   * 判断当前 Layout 是否有了children，如果有了，则不执行操作
   */
  const userInfo = useSelector((state: RootState) => state.user)
  useEffect(() => {
    if (userInfo.menus) {
      if (router.routes[1].children && router.routes[1].children.length > 0)
        return

      // 动态添加路由的代码
      const tempArray: { id: string; path: string; element: any }[] = []
      // const route = {
      //   id: '10001',
      //   path: 'user/list',
      //   element: <User />
      // }
      userInfo.menus.forEach(item => {
        item.children.forEach(subitem => {
          const Page = lazy(dynamicComponent(subitem.component))
          console.log(Page)

          const route = {
            id: Math.random() + '',
            path: `${item.path}/${subitem.path}`.substring(1),
            element: <Page />
          }
          tempArray.push(route)
        })
      })

      router.routes[1].children = tempArray
    } else {
      // 退出清空已经添加的路由
      router.routes[1].children = []
    }
  }, [userInfo])

  return (
    <Suspense fallback={<div>拼命加载中...</div>}>
      <RouterProvider router={router} />
    </Suspense>
  )
}

export default App
